<!DOCTYPE HTML>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>

    <link href="../plugins/font-awesome-4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
    <link href="../plugins/bootstrap-3.3.0/css/bootstrap.min.css" rel="stylesheet"/>
    <link href="../plugins/material-design-iconic-font-2.2.0/css/material-design-iconic-font.min.css" rel="stylesheet"/>
    <link href="../plugins/bootstrap-table-1.11.0/bootstrap-table.min.css" rel="stylesheet"/>
    <link href="../plugins/waves-0.7.5/waves.min.css" rel="stylesheet"/>
    <link href="../plugins/jquery-confirm/jquery-confirm.min.css" rel="stylesheet"/>
    <link href="../plugins/select2/css/select2.min.css" rel="stylesheet"/>
    <link href="../plugins/datetimepicker/css/bootstrap-datetimepicker.min.css">
    <link href="../plugins/datepicker/datepicker3.css" rel="stylesheet" type="text/css"/>

    <link href="../css/common.css" rel="stylesheet"/>
</head>
<style>
    .table-no-bordered{height: 500px}
</style>
<body>
<div id="main">
    <div class="panel panel-default" style="margin: 0px 0px 0px 0px ">
        <div class="panel-body">
            <div class="row" style="margin-top: 10px;margin-left: 0px;margin-bottom: 14px">
                <div class="col-xs-12 col-sm-4" style="margin-top: 5px">
                    <select id="select" style="    height: 36px;
                                  float: left;
                                  margin-right: 10px;
                                  border-radius: 4px;">
                        <option value="">订单类型-全部</option>
                        <option value="单次">单次</option>
                        <option value="包天">包天</option>
                        <option value="包周">包周</option>
                        <option value="半月">半月</option>
                        <option value="包月">包月</option>
                    </select>
                    <select id="select_status" style="    height: 36px;
                                  float: left;
                                  margin-right: 10px;
                                  border-radius: 4px;">
                        <option value="">订单状态-全部</option>
                        <option value="0">正常</option>
                        <option value="1">暂停</option>
                        <option value="2">已取消</option>
                    </select>

                </div>
                <div class="col-xs-12 col-sm-4"style="margin-top: 5px">
                    <input type="text" class="form-control" style="width: 120px;float: left; margin-right: 10px" placeholder="结束时间" id="eDate" name="eDate" value=""  >

                    <input type="text" class="form-control" style="width: 120px;float: left;" placeholder="房间号 备注" id="roomid" value="" >

                </div>
                <div class="col-xs-12 col-sm-4"style="margin-top: 5px">
                    <button type="button" class="col-sm-1 btn btn-danger btn-sm" style="margin-left: 15px;float:none;width: 58px;float: left;" onclick="_queryData();">查询
                    </button>
                </div>
            </div>



        </div>
    </div>
    <table id="tableGoodsValue"></table>
    <div style="height: 50px">&nbsp</div>
</div>
<script src="../plugins/jquery.1.12.4.min.js"></script>
<script src="../plugins/bootstrap-3.3.0/js/bootstrap.min.js"></script>
<script src="../plugins/bootstrap-table-1.11.0/bootstrap-table.min.js"></script>
<script src="../plugins/bootstrap-table-1.11.0/locale/bootstrap-table-zh-CN.min.js"></script>
<script src="../plugins/waves-0.7.5/waves.min.js"></script>
<script src="../plugins/jquery-confirm/jquery-confirm.min.js"></script>
<script src="../plugins/select2/js/select2.min.js"></script>
<script src="../js/bootstrap-table-super-search.js"></script>
<script src="../plugins/datetimepicker/js/bootstrap-datetimepicker.min.js"></script>
<script src="../plugins/datetimepicker/js/bootstrap-datetimepicker.zh-CN.js"></script>
<script src="../plugins/datepicker/bootstrap-datepicker.js"></script>

<script src="../js/common.js"></script>
<script>
    var $table = $('#tableGoodsValue');
    $(function() {
        $(document).on('focus', 'input[type="text"]', function() {
            $(this).parent().find('label').addClass('active');
        }).on('blur', 'input[type="text"]', function() {
            if ($(this).val() == '') {
                $(this).parent().find('label').removeClass('active');
            }
        });
        // bootstrap table初始化
        $table.bootstrapTable({
            url: '/user/get/transactionRecord',
            method:'get',

            striped: true,
            queryParams : function(params) {
                params.select= $("#select").val();
                params.eDate = $("#eDate").val();
                params.select_status=$("#select_status").val();
                params.roomId=$("#roomid").val();
                params.offset=params.offset;
                params.type=QueryString("type");
                return params
            },
            search: false,
            searchOnEnterKey: true,
            superSearch:false,
            showColumns: false,
            minimumCountColumns: 2,
            clickToSelect: true,
            detailFormatter: 'detailFormatter',
            pagination: true,
            paginationLoop: false,
            classes: 'table table-hover ',
            sidePagination: 'server',
            smartDisplay: true,
            idField: 'id',
            uniqueId:'id',
            escape: true,
            showRefresh:true,
            showToggle:true,
            toolbar: '#toolbar',
            columns: [

                {field: 'id', title: 'ID', align: 'center'},
                {field: 'username', title: '用户名', align: 'center'},
                {field: 'goods', title: '商品', align: 'center'},
                {field: 'price', title: '消耗积分', align: 'center'},
                {field: 'coin', title: '剩余积分', align: 'center'},
                {field: 'room', title: '房间ID/编号', align: 'center'},
                {field: 'num', title: '数量', align: 'center'},
                {field: 'createAt', title: '购买时间', align: 'center',formatter: 'dateFormatter'},
                {field: 'endDate', title: '结束时间', align: 'center',formatter: 'dateFormatter'},
                {field: 'status', title: '状态', align: 'center',formatter: 'dateFormatter2'},
                {field: 'remark', title: '备注', align: 'center',formatter: 'dateFornullr'},
                {field: 'action', title: '操作', align: 'center', formatter: 'actionFormatter', events: 'actionEvents', clickToSelect: false}
            ],
        }).on('all.bs.table', function (e, name, args) {
            $('[data-toggle="tooltip"]').tooltip();
            $('[data-toggle="popover"]').popover();
        });
        $("#eDate").datepicker('remove');
        $("#eDate").datepicker({
            startView: 0,
            maxViewMode: 1,
            minViewMode: 0,
            language: 'zh-cn',
            format: 'yyyy-mm-dd',
            autoclose: true
        });
        // //获取网页正文全文宽
        // var screenWidth = document.body.scrollWidth ;
        // if(screenWidth <= 960){
        //     $('#tableGoodsValue').css('width',600)
        //     datatable.bootstrapTable('resetView')
        // }
    });
    function _queryData(){
        $table.bootstrapTable('refresh');
    }

    function dateFornullr(value, row, index) {
        if(value=="null"){
            value=''
        }
        return value
    }
    function dateFormatter2(value, row, index) {
        if(value==0){
            value='正常'
        }else if(value==1){
            value='暂停'
        }else {
            value='订单已取消'
        }
        return value
    }
    function actionFormatter(value, row, index) {
        if(row.status==2){
            return ''
        }else{
            return [
      
                '<a class="edit ml10" href="javascript:void(0)" data-toggle="tooltip" title="修改"><i class="glyphicon glyphicon-edit"></i>编辑</a>',
                ].join('');
        }

    }

    function detailFormatter(index, row) {
        var html = [];
        $.each(row, function (key, value) {
            html.push('<p><b>' + key + ':</b> ' + value + '</p>');
        });
        return html.join('');
    }
    function dateFormatter(value, row, index) {
        return formatDate(new Date(value/1),"yyyy-MM-dd hh:mm:ss");
    }
    window.actionEvents = {
        'click .edit': function (e, value, row, index) {
            var ck1,ck2,ck3=""
            if(row.status==0){
                ck1="checked"
                ck2=""
                ck3=""
            }else if(row.status==1){
                ck1=""
                ck2="checked"
                ck3=""
            }else {
                ck1=""
                ck2=""
                ck3="checked"
            }
            $.confirm({
                title: '修改订单',
                content: '    <div class="form-group">\n' +
                    '        <label>房间号：</label>\n' +
                    '        <input type="text" value="' + row.room + '" placeholder="' + row.room + '" class="groom form-control">\n' +
                    '    </div>'+
                    '    <div class="form-group">\n' +
                    '        <label>房间状态：</label>\n' +
                    '  <label class="radio-inline">\n' +
                    '        <input type="radio" name="status'+row.Id+'" id="" value="0" '+ck1+'>正常' +
                    '    </label>\n' +
                    '    <label class="radio-inline">\n' +
                    '        <input type="radio" name="status'+row.Id+'" id=""  value="1" '+ck2+'> 暂停' +
                    '    </label>' +
                    '    <label class="radio-inline">\n' +
                    '        <input type="radio" name="status'+row.Id+'" id=""  value="2" '+ck3+'> 取消订单' +
                    '    </label>' +
                    '    </div>'+
                    '    <div class="form-group">\n' +
                    '        <label>备注：</label>\n' +
                    '        <input type="text" value="' + row.remark + '"  placeholder="' + row.remark + '" class="gremark form-control">\n' +
                    '    </div>',
                buttons: {
                    confirm: {
                        text: '修改',
                        action: function () {

                            let groom = this.$content.find('.groom').val();
                            let status = this.$content.find('input[name="status'+row.Id+'"]:checked').val();
                            let remark = this.$content.find('.gremark').val();

                            $.ajax({
                                url: '/user/get/transactionRecord_change',
                                type: 'get',
                                data: {Id: row.id, room: groom,status: status,remark: remark,type:QueryString("type")},
                                success: function (json) {
                                    $.alert({
                                        content: '修改成功！',
                                        title: false,
                                        closeIcon: false
                                    });
                                    $table.bootstrapTable('refresh');
                                },
                                error: function (error) {
                                    console.log(error);
                                }
                            });
                        }
                    },
                    cancel: {
                        text: '取消'
                    }
                }
            });
        },
        'click .edit2': function (e, value, row, index) {
          
            $.confirm({
                title: '消息提醒',
                content: '  是否上号',
                buttons: {
                    confirm: {
                        text: '确定',
                        action: function () {
                            $.ajax({
                                url: '/adimn/get/number_change',
                                type: 'get',
                                data: {Id: row.id,type:QueryString("type")},
                                success: function (json) {
                                    $.alert({
                                        content:'上号成功！',
                                        title:false,
                                        closeIcon:false
                                    });

                                    $table.bootstrapTable('refresh');
                                },
                                error: function (error) {
                                    console.log(error);
                                }
                            });

                        }
                    },
                    cancel: {
                        text: '取消'
                    }
                }
            });
        },
        'click .remove': function (e, value, row, index) {
            $.ajax({
                url: '/admin/cancel/order',
                type: 'POST',
                data: {orderId:row.id,type:QueryString("type")},
                success: function(json){
                    if(json.error){
                        $.alert({
                            content:'取消订单错误！',
                            title:false,
                            closeIcon:false
                        });
                    }else{
                        $table.bootstrapTable('removeByUniqueId',row.id);
                        $.alert({
                            content:'取消订单成功！',
                            title:false,
                            closeIcon:false
                        });
                    }
                },
                error: function(error){
                    console.log(error);
                }
            });
        }
    };

     function QueryString(val)
    {
        var uri = window.location.search;
        var re = new RegExp("" + val + "\=([^\&\?]*)", "ig");
        return ((uri.match(re)) ? (uri.match(re)[0].substr(val.length + 1)) : null);
    }
</script>
</body>
</html>